<template>

  <text
      :style="config.style"
      :x="config.x"
      :y="config.y"
      :fill="config.fill"
    >
    <template v-if="newSpan.length > 0">
      <tspan
      v-for="(span, j) in newSpan"
                :key="span.j"
                :x="span.x"
                :dy="span.dy"
                :fill="span.fill"
              >{{ span.text }}</tspan>
    </template>
    <template v-else>

      <template v-if="config.specialShow">

        <template v-if="isShowList"> 
          <tspan v-for="(item, i) in item" :key="i" v-bind="item">{{ item.value }}</tspan>"
        </template>
        
        <!-- :style="{ fontSize: fontSize.value }" -->
        <!-- <tspan :dx="0" :dy="0" :fill="${!hasBeforeValue.value ? 'transparent' : ''}" >
            {{hasBeforeValue.value ? props.beforeValue : '0'}}
          </tspan> -->
          <!-- <tspan dx={0} dy={0} fill="transparent">0</tspan>
          <tspan dx={0} dy={-3} fill={!hasAfterValue.value ? 'transparent' : ''}>
            {hasAfterValue.value ? props.afterValue : '0'}
          </tspan>
          <tspan dx={-2} dy={3} style={{ fontSize: 16 }}>/</tspan>
          {Custom_Variable.isEnema ? (
            <tspan dx={-2} dy={3}>{hasThreeValue.value ? props.threeValue : '0'}E</tspan>
          ) : (
            <tspan dx={-2} dy={3}>E</tspan>
          )} -->
      </template>

      
      <template v-else>
          {{ showValue }}
        </template>

    </template>
    </text>

</template>

<script setup>
import { ref , computed,onMounted } from 'vue';
// import { getTextWidth, getMmtoPx } from './Spo2TextSvg';

const props = defineProps({
  config: Object,
  showValue:String||Array
});

let specialList = ref([])




const isShowList = computed(() => {

  // console.log('props.config.showValue', typeof props.showValue,(typeof props.showValue) != 'string')

  return (typeof props.showValue) != 'string'

  });

  let newSpan = ref([])


  onMounted(() => { 

    const {name, style, x, y, fill, tSpan, showValue, config} = props.config;

    newSpan.value = tSpan;
    
    if(tSpan.length===0 && props.config.config && props.config.config.dys){
      newSpan.value = splitStrToRows(showValue, props.config);
    }

    // console.log('newSpan.value', props.config,newSpan.value);

    if (props.config.value=="2025-07-28") {
      
    }



    // console.log("newSpan.value", props.config,splitStrToRows(showValue, props.config));


  });


// 获取文本的显示宽度，
const getTextWidth = (item, spaceMark, style) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = `${style.fontWeight||''} ${style.fontSize}px ${style.fontFamily||''}`;

  let totalWidth = 0;
  for(let i=0; i<item.length; i++){
    let text = (item[i].value||'') + (i<item.length-1?(spaceMark||''): '');
    totalWidth += context.measureText(text).width;
  }

  return totalWidth;
}

const getMmtoPx = (number) => {
  let div = document.createElement('div');
  div.style.width = number;

  document.body.appendChild(div);
  let offsetWidth = div.offsetWidth;
  document.body.removeChild(div);

  return offsetWidth;
}

const splitStrToRows = (value, props) => {
  const widthPx = getMmtoPx(`${props.config.config.cx}mm`);
  const textWidth = getTextWidth([{ value }], '', props.style);

  if (textWidth > widthPx) {
    let valueStr = value + '';
    let rowTexts = [];
    let totalWidth = 0;
    let valueArray = valueStr.split('');
    const dys = (props.config.dys || '').split(',');
    let rowIndex = 0;


    valueArray.forEach(str => {
      // let str = valueArray[i];
      let width = getTextWidth([{ value: str }], '', props.style);

      if (totalWidth + width > widthPx && rowIndex < dys.length - 1) {
        totalWidth = 0;
        rowIndex++;
      }
      if (!rowTexts[rowIndex]) {
        rowTexts[rowIndex] = '';
      }
      rowTexts[rowIndex] += str;
      totalWidth += width;
    });


    let firstDy;
    if (props.config.firstDys) {
      const firstDys = (props.config.firstDys || '').split(',');
      firstDy = firstDys[rowTexts.length - 1];
    }

    return rowTexts.map((text, i) => {
      const dy = i === 0 ? (firstDy !== undefined ? firstDy : dys[i]) : dys[i];
      return { x: props.x, dy, style: props.style, fill: props.fill, text };
    });
  }

  return [];
};

// const newSpan = computed(() => {
//   if (props.config.tSpan.length === 0 && props.config && props.config.dys) {
//     return splitStrToRows(props.config.showValue, props);
//   }

//   console.log("newSpan",props.config.tSpan);

//   return props.config.tSpan;
// });
</script>